<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/" >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务列表-家政网</title>
    <meta name="keywords" content="保姆、月嫂">
    <meta name="description" content="">
    <meta name =“apple-mobile-web-app-capable”content =“yes”/>  
    <meta name =“apple-mobile-web-status-bar-style”content =“block”/>  
    <link rel="icon" href="./images/icon.icon" type="images/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/service.css">

</head>
<body>
    <!-- logo -->
    <header>
        <div class="header-logo">
            <a href="">
                <span class="logo-icon"></span>
            </a>
        </div>
        <div class="header-search">
            <a href="">深圳 v</a>
            <input type="text" value="搜索">
        </div>
    </header>

    <!-- 服务列表 -->
    <div class="service-menu clear">
        <ul class="menu-container clear bottom-line">
            <li class="look-on" ><a href="javascript:void(0)">家政</a></li>
            <li><a href="javascript:void(0)">上门安装</a></li>
            <li><a href="javascript:void(0)">保姆/月嫂</a></li>
            <li><a href="javascript:void(0)">上门维修</a></li>
            <li><a href="javascript:void(0)">搬家</a></li>
            <li><a href="javascript:void(0)">配送服务</a></li>
        </ul>

        <!-- 服务列表子菜单 -->
        <div class="service-submenu">
            <ul class="submenu-container" style="display:bolck">
                <li><a href="">AA日常保洁</a></li>
                <li><a href="">客厅保洁</a></li>
                <li><a href="">除甲醛</a></li>
                <li><a href="">油烟机清洗</a></li>
                <li><a href="">保洁</a></li>
                <li><a href="">油烟机清洗</a></li>
                <li><a href="">保洁</a></li>
                <li><a href="">油烟机清洗</a></li>
                <li><a href="">保洁</a></li>
            </ul>
            <ul class="submenu-container" style="display:none">
                <li><a href="">BBB门窗安装</a></li>
                <li><a href="">空调安装</a></li>
                <li><a href="">油烟机安装</a></li>
                <li><a href="">暖气片安装</a></li>
                <li><a href="">安装</a></li>
                <li><a href="">卧室安装</a></li>
            </ul>
            <ul class="submenu-container" style="display:none">
                <li><a href="">CCCC</a></li>
                <li><a href="">CCCCC</a></li>
                <li><a href="">油烟机安装</a></li>
                <li><a href="">暖气片安装</a></li>
                <li><a href="">安装</a></li>
                <li><a href="">卧室安装</a></li>
            </ul>
            <ul class="submenu-container" style="display:none">
                <li><a href="">DDD</a></li>
                <li><a href="">DD</a></li>
                <li><a href="">油烟机安装</a></li>
                <li><a href="">暖气片安装</a></li>
                <li><a href="">安装</a></li>
                <li><a href="">卧室安装</a></li>
            </ul>
            <ul class="submenu-container" style="display:none">
                <li><a href="">EEE</a></li>
                <li><a href="">EEEEE</a></li>
                <li><a href="">油烟机安装</a></li>
                <li><a href="">暖气片安装</a></li>
                <li><a href="">安装</a></li>
                <li><a href="">卧室安装</a></li>
            </ul>
            <ul class="submenu-container" style="display:none">
                <li><a href="">FFF</a></li>
                <li><a href="">FFFFFFF</a></li>
                <li><a href="">油烟机安装</a></li>
                <li><a href="">暖气片安装</a></li>
                <li><a href="">安装</a></li>
                <li><a href="">卧室安装</a></li>
            </ul>
        </div>
    </div>
    
    <!--  排序  -->
    <div class="service-sort clear">
        <div class="sort-container">
            <a href="javascript:void(0)">热门</a>
            <a href="javascript:void(0)">价格</a>
            <a href="javascript:void(0)">销量</a>
        </div>
    </div>

    <!-- 服务列表内容 -->
    <div class="service-main clear">
        <ul class="service-main-container">
            <li class="main-items bottom-line">
                <a href="./serviceid.html">
                    <div class="items-img"><img src="./images/items-img.jpg" alt=""></div>

                    <div class="items-title">
                        <p>客厅深度保洁服务，5年专业保洁经验</p>
                        <p><span>李师傅</span> <span>已服务50次</span></p>
                        <p></p>
                    </div>

                    <div class="items-price">
                        <p class="items-price-money"><span>5元/平</span> <del>10元/平</del></p>
                        <p class="items-price-buy">
                            <span class="">购买服务</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="main-items bottom-line">
                <a href="./serviceid.html">
                    <div class="items-img"><img src="./images/items-img.jpg" alt=""></div>

                    <div class="items-title">
                        <p>客厅深度保洁服务，5年专业保洁经验</p>
                        <p><span>李师傅</span> <span>50次</span></p>
                        <p></p>
                    </div>

                    <div class="items-price">
                        <p class="items-price-money"><span>5元/平</span> <del>10元/平</del></p>
                        <p class="items-price-buy">
                            <span class="">购买服务</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="main-items bottom-line">
                <a href="./serviceid.html">
                    <div class="items-img"><img src="./images/items-img.jpg" alt=""></div>

                    <div class="items-title">
                        <p>客厅深度保洁服务，5年专业保洁经验</p>
                        <p><span>李师傅</span> <span>50次</span></p>
                        <p></p>
                    </div>

                    <div class="items-price">
                        <p class="items-price-money"><span>5元/平</span> <del>10元/平</del></p>
                        <p class="items-price-buy">
                            <span class="">购买服务</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="main-items bottom-line">
                <a href="./serviceid.html">
                    <div class="items-img"><img src="./images/items-img.jpg" alt=""></div>

                    <div class="items-title">
                        <p>客厅深度保洁服务，5年专业保洁经验</p>
                        <p><span>李师傅</span> <span>50次</span></p>
                        <p></p>
                    </div>

                    <div class="items-price">
                        <p class="items-price-money"><span>5元/平</span> <del>10元/平</del></p>
                        <p class="items-price-buy">
                            <span class="">购买服务</span>
                        </p>
                    </div>
                </a>
            </li>
            <li class="main-items bottom-line">
                <a href="./serviceid.html">
                    <div class="items-img"><img src="./images/items-img.jpg" alt=""></div>

                    <div class="items-title">
                        <p>客厅深度保洁服务，5年专业保洁经验</p>
                        <p><span>李师傅</span> <span>50次</span></p>
                        <p></p>
                    </div>

                    <div class="items-price">
                        <p class="items-price-money"><span>5元/平</span> <del>10元/平</del></p>
                        <p class="items-price-buy">
                            <span class="">购买服务</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <!-- 翻页 -->
    <div class="page">
        <div class="page-container">
            <a href="">上一页</a>
            <a href="">下一页</a>
        </div>
    </div>

    <!-- 版权信息 -->
    <div class="footer">
        <div class="footer-container">
            <p>家政网，你的专业私人管家助手</p>
            <p>家政热线：<span>400-200-300</span>&nbsp;&nbsp;&nbsp;<span>031-516-511</span></p>
            <p class="footer-contact">
                <a href="">成为合伙人</a> |
                <a href="">关于我们</a> |
                <a href="">意见反馈</a> |   
                <a href="">在线招聘</a>
            </p>
        </div>
    </div>

    <!-- 悬浮导航 -->
    <div class="suspend-footer">
        <ul class="suspend-container">
            <li class="suspend-list">
                <a href="">
                    <div><span class="home-icon suspend-icons"></span></div>
                    <div class="home-title">首页</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="publish-icon suspend-icons"></span></div>
                    <div class="home-title">发布</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="information-icon suspend-icons"></span></div>
                    <div class="home-title">消息</div>
                </a>
            </li>
            <li class="suspend-list">
                <a href="">
                    <div><span class="user-icon suspend-icons"></span></div>
                    <div class="home-title">我的</div>
                </a>
            </li>
        </ul>
    </div>
    <script src="./js/service.js"></script>
</body>
</html>


